feat: Add NFTs full page #21647

brianacnguyen · 2025-10-24T21:00:18Z

Description

This PR adds full-page views for both Tokens and NFTs to the wallet, providing users with expanded views of their assets with improved navigation and layout.

The changes include:

New full-page views for Tokens and NFTs accessible via "View all" buttons
Enhanced NFT grid with configurable display limits and full-view mode
Improved navigation structure by moving import screens to the main stack
Updated component architecture for better reusability and maintainability

Changelog

CHANGELOG entry: Added full-page views for Tokens and NFTs with "View all" navigation buttons

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?selectedIssue=DSYS-246

Manual testing steps

Feature: Full-Page Asset Views

  Scenario: User views all tokens
    Given the user is on the Wallet home screen
    When the user clicks "View all tokens" button on the Tokens tab
    Then they should see a full-page view of all their tokens with a back button

  Scenario: User views all NFTs
    Given the user is on the Wallet home screen
    When the user clicks "View all NFTs" button on the NFTs tab
    Then they should see a full-page view of all their NFTs with a back button

  Scenario: User imports tokens
    Given the user is on any screen
    When the user navigates to import tokens
    Then the import screen should not show the bottom navigation bar

  Scenario: User imports NFTs
    Given the user is on any screen
    When the user navigates to import NFTs
    Then the import screen should not show the bottom navigation bar

Screenshots/Recordings

Before

After

Tokens Full View
https://github.com/user-attachments/assets/4b6fe582-d5c8-4e3a-8f8e-132047cc1b9e

NFTs Full View
https://github.com/user-attachments/assets/104b9d20-eb88-429f-9a60-f6475a9eea7d

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Adds a full-page NFTs view with route/navigation and upgrades NftGrid to support full-view layout, "View all NFTs" action, and improved add/import flow, with styles/i18n updates and tests.

Wallet/UI:
- New screen: Views/NftFullView with header/back handling; registered in MainNavigator as Routes.WALLET.NFTS_FULL_VIEW (header hidden).
- NftGrid (UI/NftGrid/NftGrid.tsx):
  - Adds isFullView, maxItems, and flashListProps support; groups items into 3-column rows via custom NftRow and Tailwind classes.
  - Shows "View all NFTs" button (navigates to Routes.WALLET.NFTS_FULL_VIEW) when maxItems exceeded.
  - Changes add NFT action to navigation.push('AddAsset', { assetType: 'collectible' }).
  - Integrates BaseControlBar layout tweaks and optional full-view padding; removes numColumns.
- Navigation/Routes: Adds WALLET.NFTS_FULL_VIEW to Routes.ts; registers in MainNavigator and snapshot updated.
Styles/I18n:
- CollectibleMedia.styles: textContainer background switched to colors.background.section.
- ControlBarStyles: center-aligns controlButtonInnerWrapper.
- locales/en.json: adds wallet.view_all_nfts.
Tests:
- New NftFullView.test.tsx; expanded NftGrid.test.tsx for full-view, "View all", navigation, and fetching states.

^{Written by Cursor Bugbot for commit a9c91a4. This will update automatically on new commits. Configure here.}

github-actions · 2025-10-24T21:00:33Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

app/components/UI/AddCustomCollectible/index.tsx

…to feat/nfts-full-page

brianacnguyen · 2025-10-28T14:20:54Z

app/components/Nav/Main/MainNavigator.js

+        name="AddAsset"
+        component={AddAsset}
+        options={{ headerShown: false }}
+      />


This needs to be moved out to the main stack to work with the new asset full pages. Additionally, it should not have the bottom nav

brianacnguyen · 2025-10-28T14:21:05Z

app/components/UI/CollectibleMedia/CollectibleMedia.styles.ts

      alignItems: 'center',
      justifyContent: 'flex-start',
-      backgroundColor: colors.background.alternative,
+      backgroundColor: colors.background.section,


Updated based on design

brianacnguyen · 2025-10-28T14:21:36Z

app/components/UI/NftGrid/NftGrid.tsx


-const NftGrid = () => {
-  const navigation = useNavigation();
+const NftRow = ({


Moving to a row approach for better spacing

brianacnguyen · 2025-10-28T14:22:05Z

app/components/UI/NftGrid/NftGrid.tsx

+      scrollEnabled: true,
+    }),
+    [tw],
+  );


Different grid styling based on views

brianacnguyen · 2025-10-28T14:22:38Z

app/components/UI/NftGrid/NftGrid.tsx

-    </View>
+
+      {/* View all NFTs button - shown when there are more items than maxItems */}
+      {shouldShowViewAllButton && (


This will be under a scrolldisabled flashlist, so its fine to stay outside

brianacnguyen · 2025-10-28T14:22:58Z

app/components/UI/NftGrid/NftGridItem.tsx

  container: {
    flex: 1,
-    padding: 5,
  },


Removing padding here for the row approach

brianacnguyen · 2025-10-28T14:23:34Z

app/components/Views/AddAsset/AddAsset.tsx

    return tokensData && Object.keys(tokensData).length > 0;
  }, [selectedNetwork, tokenListForAllChains]);

-  const updateNavBar = useCallback(() => {


since this page is moved to the main stack, these are moved to the header below

…to feat/nfts-full-page

…amask-mobile into feat/nfts-full-page

cursor

Bug: NFT Grid Missing Prop Hides View All Button

The "View all NFTs" button will never be visible because NftGrid is used without the maxItems prop. Looking at the NftGrid component, the view-all button only displays when maxItems is provided and the total collectibles exceed maxItems. In WalletTokensTabView, NftGrid is instantiated without maxItems parameter, making the shouldShowViewAllButton condition always false. This prevents users from accessing the "View all NFTs" feature as described in the PR manual testing scenarios. The code should pass a maxItems prop to limit the display in the tab view (e.g., maxItems={3} or similar) to enable the view-all button functionality.

app/components/Views/Wallet/index.tsx#L518-L522

metamask-mobile/app/components/Views/Wallet/index.tsx

Lines 518 to 522 in a9c91a4

    
             const selectedInternalAccount = useSelector(selectSelectedInternalAccount); 
        
             /** 
        
              * Provider configuration for the current selected network 
        
              */

sonarqubecloud · 2025-10-28T15:38:17Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
98.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Added NFTsFullView page

7622334

brianacnguyen requested a review from a team as a code owner October 24, 2025 21:00

brianacnguyen self-assigned this Oct 24, 2025

brianacnguyen added team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels Oct 24, 2025

github-actions bot added the size-L label Oct 24, 2025

This comment was marked as outdated.

Sign in to view

Removed unnecessary additions

96875e5

This comment was marked as outdated.

Sign in to view

Added maxitems to nftgrid

4a5167a

This comment was marked as outdated.

Sign in to view

Reorgs nft folder structures

83a52a9

This comment was marked as outdated.

Sign in to view

Updated tests

b34b57f

This comment was marked as outdated.

Sign in to view

brianacnguyen added 2 commits October 27, 2025 08:04

Updated snapshots

391dd20

Reorg Nft structure

42ac14a

This comment was marked as outdated.

Sign in to view

Added test ids to nftgrid

170be7e

This comment was marked as outdated.

Sign in to view

Reverted unnecessary changes

08039c9

This comment was marked as outdated.

Sign in to view

brianacnguyen commented Oct 27, 2025

View reviewed changes

app/components/UI/AddCustomCollectible/index.tsx Show resolved Hide resolved

brianacnguyen added 3 commits October 27, 2025 12:18

Removed more unnecessary changes

28f2ad3

Reverted more unnecessary changes

fa8cbbb

Removed double padding

19d5b4c

This comment was marked as outdated.

Sign in to view

brianacnguyen added 2 commits October 27, 2025 12:33

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

28a2808

…to feat/nfts-full-page

Updated AddAsset tests

fc3572e

brianacnguyen added 4 commits October 27, 2025 12:48

Updated addasset tests

baf5396

Updated NftGrid tests

549e2fa

Merge branch 'main' into feat/nfts-full-page

92ee691

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

76460af

…to feat/nfts-full-page

brianacnguyen commented Oct 28, 2025

View reviewed changes

app/components/UI/NftGrid/NftGrid.tsx

scrollEnabled: true,

}),

[tw],

);

Copy link

Contributor Author

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different grid styling based on views

brianacnguyen commented Oct 28, 2025

View reviewed changes

brianacnguyen enabled auto-merge October 28, 2025 14:47

Prithpal-Sooriya previously approved these changes Oct 28, 2025

View reviewed changes

brianacnguyen added 2 commits October 28, 2025 08:15

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

db338ef

…to feat/nfts-full-page

Merge branch 'feat/nfts-full-page' of https://github.com/MetaMask/met…

a9c91a4

…amask-mobile into feat/nfts-full-page

brianacnguyen dismissed Prithpal-Sooriya’s stale review via a9c91a4 October 28, 2025 15:15

cursor bot reviewed Oct 28, 2025

View reviewed changes

Prithpal-Sooriya approved these changes Oct 28, 2025

View reviewed changes

brianacnguyen added this pull request to the merge queue Oct 28, 2025

Merged via the queue into main with commit c835647 Oct 28, 2025
85 checks passed

brianacnguyen deleted the feat/nfts-full-page branch October 28, 2025 16:03

github-actions bot locked and limited conversation to collaborators Oct 28, 2025

metamaskbot added the release-7.59.0 Issue or pull request that will be included in release 7.59.0 label Oct 28, 2025

	const selectedInternalAccount = useSelector(selectSelectedInternalAccount);

	/**
	* Provider configuration for the current selected network
	*/

Uh oh!

Uh oh!

feat: Add NFTs full page #21647

feat: Add NFTs full page #21647

Conversation

brianacnguyen commented Oct 24, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Oct 24, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

brianacnguyen Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: NFT Grid Missing Prop Hides View All Button

Uh oh!

sonarqubecloud bot commented Oct 28, 2025

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

brianacnguyen commented Oct 24, 2025 •

edited by cursor bot

Loading